<template>
  <div>
    <div style="border: 1px solid #ccc; borderradius: 2px">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :default-config="toolbarConfig"
        :mode="mode"
      />
      <Editor
        v-model="html"
        style="height: 400px; overflow-y: hidden"
        :default-config="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
        @onChange="onChange"
      />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { upload } from '@/api/upload'
import '@wangeditor/editor/dist/css/style.css'

export default Vue.extend({
  components: { Editor, Toolbar },
  props: {
    myhtml: {
      type: String,
      default: `<p>加载中...</p>`
    },
    myMode: {
      type: String,
      default: 'defalut' // or 'simple' 'default'
    }
  },
  data() {
    return {
      editor: null, // 编辑器实例
      toolbarConfig: {
        // insertKeys: {
        //   index: 18, // 插入的位置，基于当前的 toolbarKeys
        //   keys: ['emotion', 'fontSize']
        // },
        // toolbarKeys: [], //显示那些
        // excludeKeys: ['lineHeight', 'fullScreen', 'todo'] // 不显示那些
        excludeKeys: ['fullScreen', 'lineHeight', 'delIndent', 'todo'] // 不显示那些

      },
      editorConfig: {
        placeholder: '请输入内容...',
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          // 小于该值就插入 base64 格式（而不上传），默认为 0
          base64LimitSize: 5 * 1024, // 5kb
          // 配置上传图片
          uploadImage: {
            customUpload: this.handleUploadImage
          },
          uploadVideo: {
            customUpload: this.handleUploadVideo
          }
        }
      }
      // mode: 'defalut' // or 'simple' 'default'
    }
  },
  computed: {
    html: {
      get() {
        return this.myhtml
      },
      set(v) {
        // console.log('v', v)
      }
    },
    mode: {
      get() {
        return this.myMode
      },
      set(v) {
        // console.log('v', v)
      }
    }
  },

  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      // console.log('onChange', editor.getAllMenuKeys())
    },
    // 内容变化
    onChange(editor) {
      //   console.log('onChange', editor.getAllMenuKeys())
    },

    // 自定义图片上传
    handleUploadImage(file, insertFn) {
      // console.log('file', file)
      var formData = new FormData()
      formData.append('file', file, file.name) //
      upload(formData).then(res => {
        console.log('upload', res)
        if (res.code === 20000) {
          insertFn(res.data.src, 'errimage')
          this.$message({
            message: '上传成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '上传失败',
            type: 'error'
          })
        }
      })
    },

    // 自定义视频上传
    handleUploadVideo(file, insertFn) {
      console.log('file video', file)
      var formDatavideo = new FormData()
      formDatavideo.append('file', file, file.name) //
      upload(formDatavideo).then(res => {
        // console.log('upload', res)
        if (res.code === 20000) {
          insertFn(res.data.src)
          this.$message({
            message: '上传成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '上传失败',
            type: 'error'
          })
        }
      })
    },
    // 给父组件传递富文本内容
    sendChildHtml() {
      // console.log('this.editor.getHtml()', this.editor.getHtml())
      this.$emit('sendHtml', this.editor.getHtml())
    }

  }
})
</script>
